<template>
    <div class="chart-box">
        <svg width="500" height="300"></svg>
    </div>
</template>

<script setup>
import * as d3 from 'd3';
import { ref, onMounted } from 'vue'

const data = [10, 20, 30, 40, 29];
const categories = ["A", "B", "C", "D", "E"];

const drawChart = () => {
    const svg = d3.select("svg"),
        margin = { top: 20, right: 20, bottom: 30, left: 40 },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;

    const x = d3.scaleBand()
        .domain(categories)
        .range([0, width])
        .padding(0.1);

    const y = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height, 0]);

    const g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .call(d3.axisLeft(y));

    // let colorScale = d3.scaleLinear()
    //     .domain([0, d3.max(data)])
    //     .range(["lightblue", "darkblue"]);
    // let colorScale = d3.scaleOrdinal()
    //     .domain(["start", "end"])
    //     .range([d3.rgb(255, 100, 100), d3.rgb(100, 100, 255)]);
    let colorScale = d3.scaleOrdinal()
        .domain(data)
        .range(d3.schemeCategory10);

    g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", (d, i) => x(categories[i]))
        .attr("y", d => y(d))
        .attr("width", x.bandwidth())
        .attr("height", d => height - y(d))
        .attr("fill", d => colorScale(d))
        ;
}

onMounted(() => {
    drawChart();
});
</script>

<style scoped>
.chart-box {
    width: 100vw;
    height: 100vh;
}
</style>